<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test</title>
    <link href="./hwlist.css" rel="stylesheet">
    <script src="./jquery-1.10.2.min.js"></script>
    <script src="./base.js"></script>
    <script src="./hwlist.js"></script>
    <style>
        
    </style>
    <style>
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .hwtab{
            margin: 10px 0;
            text-align: left !important;
            width: 100%;
            height: 100%;
            font-size: 14px;
        }
        .hwtab .tab-title{
            position: relative;
            left: 0;
            height: 40px;
            white-space: nowrap;
            /*放到皮肤中设置
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: #E4E7ED; */
        }
        .hwtab .tab-title li {
            display: inline-block;
            vertical-align: middle;
            position: relative;
            line-height: 40px;
            /* min-width: 65px; */
            padding: 0 15px;
            text-align: center;
            cursor: pointer;
        }
        .hwtab .tab-content {
            position: relative;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            /* padding: 10px; */
        }
        .hwtab .tab-content .tab-item{
            display: none;
        }
        .hwtab .tab-content .tab-show{
            display: block !important;
        }
       
        /*皮肤样式*/
        .hwtab-default .tab-title{
            border-bottom: 1px solid #E4E7ED;
        }
        .hwtab-default>.tab-title .layui-this{
            color: #1989FA;
            letter-spacing: 0;
            border-bottom: 2px solid #1989FA;
        }
       
    </style>
    <script>
       
        var tablist,tablist2;
        $(function(){
            tablist = new listTComponent({
                container:$(".111")
            })
            tablist2 = new listTComponent({
                container:$(".222")
            })
        })

        function changedata(){
            tablist.setData([{dyid:"THAT13",dymc:"1111"},
                            {dyid:"THAT14",dymc:"2222"}, 
                            {dyid:"THAT15",dymc:"3333"}
            ])  
        }
    </script>
</head>
   
<body>
        <div>
                <input type="button" value="更新数据" onclick="changedata()"/>
            </div>
        <div style="width:400px;height:200px;" class='111'>
            
         </div>
         <div style="width:400px;height:200px;" class='222'>
            
        </div>
</body>

</html>